<template>
  <view class="NAVBAR_container" :style="{ 'height': statusBarHeight + 40 + 'px' }">

    <view class="NAVBAR_container_fixedPane" :style="OPTIONS.style + 'padding-top:' + statusBarHeight + 'px;'">

      <!-- 完全自定义插槽 -->
      <slot name="slot_custom" v-if="createSlot('slot_custom')" @click="navClick('slot_custom')" />

      <template v-else>
        <slot name="slot_left" v-if="createSlot('slot_left')" />

        <!-- 左侧区域：左侧插槽、左侧图标、左侧文字-->
        <view class="NAVBAR_left" :style="OPTIONS.left.style" @click="navClick('NAVBAR_left')"
          v-else-if="OPTIONS.left.icon">

          <!-- 左侧图标 -->
          <view class="NAVBAR_left_icon" v-if="OPTIONS.left.icon">
            <view :class="'cuIcon-' + OPTIONS.left.icon"></view>
          </view>

          <!-- 左侧文字描述 -->
          <view class="NAVBAR_left_desc margin-left-xs" v-if="OPTIONS.left.desc" v-html="OPTIONS.left.desc">
          </view>
        </view>

        <!-- 中间区域 -->
        <view class="NAVBAR_center" :style="OPTIONS.center.style" @click="navClick('NAVBAR_center')">

          <slot name="slot_center" v-if="createSlot('slot_center')" />

          <view class="NAVBAR_center_title" v-else v-html="OPTIONS.center.title">
          </view>

        </view>
        <!-- 右侧区域：右侧插槽、右侧文字、右侧图标 -->
        <view class="NAVBAR_right" :style="OPTIONS.right.style" @click="navClick('NAVBAR_right')"
          v-if="createSlot('slot_right') || OPTIONS.right.icon">

          <slot name="slot_right" v-if="createSlot('slot_right')" />

          <template v-else>
            <!-- 右侧图标 -->
            <view class="NAVBAR_right_icon" v-if="OPTIONS.right.icon">
              <view :class="'cuIcon-' + OPTIONS.right.icon"></view>
            </view>
            <!-- 右侧文字描述 -->
            <view class="margin-left-xs" v-if="OPTIONS.right.desc" v-html="OPTIONS.right.desc">
            </view>
          </template>
        </view>
      </template>
    </view>
  </view>
</template>
<script>
let _ = require('lodash')
export default {
  name: 'component_NAVBAR',
  props: {
    options: {
      type: Object,
      default: () => {
        // 接收如下参数，具体作用参照同目录下的readme
        // return {
        // statusBar:'white'// 状态栏图标、文字颜色
        //   slot: [], // 插槽
        //   left: {
        //     icon: 'back',// 左侧图标
        //     img: '',// 左侧图标图片
        //     desc: '',// 左侧图标的文字描述
        //     style: 'color:white;',// 左侧文字描述的样式
        //     methodsName: '' // 下发点击事件名
        //   },
        //   center: {
        //     title: '标题',// 标题
        //     style: 'color:white;',// 样式
        //     methodsName: '' // 下发点击事件名
        //   },
        //   right: {
        //     icon: '',// 右侧图标
        //     img: '',// 右侧图标图片
        //     desc: '右侧',// 右侧图标的文字描述
        //     style: 'color:white;',// 右侧文字描述的样式
        //     methodsName: '' // 下发点击事件名
        //   },
        //   style: 'background:#05AAF4;',// 导航栏整体样式
        // }
      }
    }
  },
  data() {
    return {
      defalutOptions: {
        statusBar: 'dark', // 状态栏图标、文字颜色
        slot: [], // 插槽
        left: {
          icon: '', // 左侧图标
          img: '', // 左侧图标图片
          desc: '', // 左侧图标的文字描述
          style: 'color:white;', // 左侧文字描述的样式
          methodsName: '' // 下发点击事件名
        },
        center: {
          title: '', // 标题
          style: 'color:white;', // 样式
          methodsName: '' // 下发点击事件名
        },
        right: {
          icon: '', // 右侧图标
          img: '', // 右侧图标图片
          desc: '', // 右侧图标的文字描述
          style: 'color:white;', // 右侧文字描述的样式
          methodsName: '' // 下发点击事件名
        },
        style: 'background: linear-gradient(90deg, #21b37b 0%, #21b37c 100%);', // 导航栏整体样式
      },
      OPTIONS: {}, // 整合 接收的与默认的参数  =  实际使用的参数
      statusBarHeight: 0, // 状态栏高度
    }
  },
  methods: {

    // 点击事件
    navClick(name) {
      this.$emit('NAVBAR_click', name)
      // 各区域点击事件。
      switch (name) {
        // 返回
        case 'NAVBAR_left': {
          // 如果有自定义左侧按钮事件，则触发自定义事件
          if (this.OPTIONS.left.methodsName != '') {
            this.$emit(this.OPTIONS.left.methodsName)
          } else {
            uni.navigateBack({
              delta: 1,
              fail: (e) => {
                if (e.errMsg === 'navigateBack:fail cannot navigate back at first page.') {
                  // 重定向至首页
                  uni.reLaunch({
                    url: '/pages/layout/index'
                  })
                }
              }
            })
          }
          break
        }
        // 返回顶部
        case 'NAVBAR_center': {
          // 如果有自定义标题点击事件，则触发自定义事件
          if (this.OPTIONS.center.methodsName != '') {
            this.$emit(this.OPTIONS.center.methodsName)
          } else {
            uni.pageScrollTo({
              scrollTop: 0,
              duration: 300
            })
          }
          break
        }
        case 'NAVBAR_right': {
          // 如果有自定义右侧点击事件，则触发自定义事件
          this.$emit(this.OPTIONS.right.methodsName)
        }
      }
    },

    // 判断是否应该创建slot插槽
    createSlot(name) {
      if (this.OPTIONS.slot.indexOf('slot_custom') !== -1 && name === 'slot_custom') {
        // 如果slot列表中有slot_custom(完全自定义),且当前是判断slot_custom该不该创建
        return true
      } else if (this.OPTIONS.slot.indexOf('slot_custom') !== -1) {
        // 如果slot列表中有slot_custom(完全自定义)，且不是判断slot_custom该不该创建,存在custom时，其他参数不起作用，走组件完全本地创建
        return false
      } else if (this.OPTIONS.slot.indexOf(name) !== -1) {
        // 如果slot列表中有当前判断的slot名，则创建
        return true
      } else {
        return false
      }
    }
  },

  watch: {
    // 更改状态栏颜色
    // #ifdef APP-PLUS
    'OPTIONS.statusBar': {
      handler(n) {
        if (n === 'light') {
          plus.navigator.setStatusBarStyle('light')
        } else {
          plus.navigator.setStatusBarStyle('dark')
        }
      },
      deep: true,
      immediate: true
    },
    // #endif

    options: {
      handler(n) {
        // 合并接收的参数。
        this.OPTIONS = _.merge({}, this.defalutOptions, n)

        try {
          // 如果没有传入title，默认使用在page.json中注册的名字
          if (this.OPTIONS.center.title === '') {
            const len = getCurrentPages().length
            this.OPTIONS.center.title = getCurrentPages()[len - 1].$holder.navigationBarTitleText
          }
        } catch (error) {

        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // #ifdef MP-WEIXIN
    // 设置状态栏高度
    const menuInfo = uni.getStorageSync('menuInfo')


    //! 状态栏：statusBarHeight, 标题栏：40px + 状态栏，导航栏：navigationBarHeight || statusBarHeight/2，菜单栏：50px + 导航栏
    this.statusBarHeight = menuInfo.statusBarHeight

    //! 如果有传入右侧的参数，则需要对中右部分 进行宽度调整、适配微信'
    // 中间宽度 = 100% - 20vw(左右部分和) - 按钮宽度 - 按钮右间距 - 为了美观加的相同的左间距
    if (this.createSlot('slot_right') || this.OPTIONS.right.icon) {
      this.OPTIONS.center.style += 'width:calc(100% - 20vw - ' + (menuInfo.menuWidth + 2 * menuInfo.menuRight) + 'px);'
    } else {
      this.OPTIONS.center.style += 'width: 80%;'
    }
    // #endif
  }
}
</script>